import * as Echarts from 'echarts/core';
import { get, merge, random, compact } from 'lodash-es';
import { merge as remerge } from '../../utils/index.js';
import { getEchartsLinearColors } from './echartsUtils.js';

export function getLinearColor(color) {
  const colors =
    color && color.length
      ? color
      : [
          { offset: 0, color: 'rgba(255,98,17,0.6)' },
          { offset: 1, color: 'rgba(255,98,17,0)' },
        ];
  return colors[0].color;
}

export function echartsPieOptions(dataSource, options) {
  const { title, legend, grid, series, tooltip } = Object.assign({}, options);
  let filterList = Array.isArray(dataSource) ? compact(dataSource.map((item) => item.color)) : [];
  let colorList =
    filterList && filterList.length
      ? filterList
      : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
  return {
    title: merge(
      {
        top: 'middle',
        left: get(series, 'center[0]') || '50%',
        textAlign: 'center',
        textVerticalAlign: 'top',
        textStyle: {
          fontSize: 36,
          color: '#fff',
        },
        subtextStyle: {
          fontSize: 16,
          color: '#fff',
        },
      },
      title
    ),
    legend: merge(
      {
        data: dataSource,
        icon: 'diamond',
        itemWidth: 15,
        itemGap: 15,
        top: 'middle',
        right: 0,
        width: 'auto', //通过控制width,设置换行
      },
      legend
    ),
    grid: merge(
      {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
      grid
    ),
    color: colorList,
    tooltip: merge({}, { trigger: 'item' }, tooltip),
    series: [
      merge(
        {
          data: dataSource,
          type: 'pie',
          clockwise: true, //饼图的扇区是否是顺时针排布
          center: ['50%', '50%'],
          radius: ['70%', '90%'],
          label: { show: false },
          labelLine: { show: false },
          avoidLabelOverlap: true, //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
          itemStyle: {
            borderColor: 'rgba(11, 26, 38, 0.7)',
            borderWidth: 1,
            borderRadius: 1,
          },
        },
        series
      ),
    ],
  };
}

export const getEchartsPieOptions = echartsPieOptions;
export function getEchartsLineBarOptions(options) {
  return remerge(options, {
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      splitLine: { show: false },
      axisLine: {
        show: true,
        lineStyle: { color: 'rgba(255,255,255,0.15)' },
      },
    },
    series: [
      {
        data: [],
        type: 'line',
        symbol: 'circle',
        symbolSize: 30,
        lineStyle: {
          color: '#5470C6',
          width: 4,
          type: 'solid',
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#EE6666',
          color: 'transparent',
        },
      },
      {
        data: [],
        type: 'line',
        symbol: 'roundRect',
        symbolSize: 10,
        lineStyle: {
          color: '#5470C6',
          width: 4,
          type: 'solid',
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#EE6666',
          color: '#EE6666',
        },
      },
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.63, color: 'rgba(108, 215, 255, 0.334)' },
            { offset: 0.15, color: 'rgba(108, 215, 255, 0.25)' },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' },
            ]),
          },
        },
        data: [],
      },
    ],
  });
}

export function getEchartsMultiGradientLine(options) {
  return merge(
    {
      legend: { icon: 'rect', itemHeight: 6, itemWidth: 18, right: 0, top: 0 },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      grid: {
        top: '6%',
        left: '2%',
        right: '8%',
        bottom: 0,
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.8)',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          minInterval: 1,
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: { color: 'rgba(255,255,255,0.8)' },
          },
        },
      ],
    },
    options,
    {
      series: options.series.map((item) => {
        return merge(
          {
            type: 'line',
            smooth: true,
            icon: 'circle',
            emphasis: {
              focus: 'series',
            },
          },
          item,
          {
            name: item.name,
            data: item.data,
            itemStyle: {
              color: getLinearColor(item.color),
            },
            areaStyle: {
              color: getEchartsLinearColors(item.color),
            },
          }
        );
      }),
    }
  );
}
